<template>
  <el-container style="padding: 15px">
    <el-header>
      <el-form size="small" label-width="90px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="3">
            <el-form-item label="每行展示数">
              <el-input v-model="spiderForm.rowNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0px">
              <el-button type="primary" @click="getSpiderList" :loading="searchButtonLoading">确定</el-button>
              <el-button @click="resetList" :loading="searchButtonLoading">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <card-list :spider-list="list"></card-list>
    </el-main>
  </el-container>
</template>

<script>
import CardList from "@/components/application/component/spidermanager/cardList";
import {spiderGetList} from "@/api/Spider";

export default {
  name: "SpiderManager",
  components: {CardList},
  data(){
    return{
      list: [],
      spiderForm: {},
      searchButtonLoading: false,
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    init(){
      this.getSpiderList()
    },

    getSpiderList(){
      this.searchButtonLoading = true
      const spiderForm = this.spiderForm;
      const rowNum = spiderForm.rowNum;
      spiderGetList(rowNum).then(res => {
        this.list = res.data.data.spiderList
        this.searchButtonLoading = false
      })
    },

    resetList() {
      this.spiderForm = {}
      this.getSpiderList()
    },
  }

}
</script>

<style scoped>

</style>
